import React ,{useEffect,useState} from 'react';
import {NavBar,Icon} from 'antd-mobile';
import {Divider, Tag} from 'antd'
import {country_img, limit_title} from '../../people/utils'
import './newsdetail.css'



const Newsdetail = (props) =>{
    const [ch_title,setch_title] = useState()
    const [author,setauthor] = useState()
    const [ch_content,setch_content] = useState()
    const [classification,setclassification] = useState()
    const [country,setcountry] = useState()
    const [date,setdate] = useState()
    const [media,setmedia] = useState()
    const [url,seturl] = useState()
    const [content,setcontent] = useState()
    



    useEffect(()=>{
     
        const data = props.location.state.newsinfo
        console.log(data);
        setch_title(data.chtitle)
        setauthor(data.author)
        setch_content(data.chcontent)
        setclassification(data.classification)
        setcountry(data.country)
        setdate(data.date)
        setmedia(data.media)
        seturl(data.url)
        setcontent(data.content)
    },[])

   
    const goback = ()=>{
        props.history.goBack()
    }



    return ( 
        <div className="news_detail">
            
            <NavBar
                mode="dark"
                icon={<Icon type="left" />}
                onLeftClick={goback}
                rightContent={[
                  ]}
                >
                {limit_title(ch_title)}
            </NavBar>
            <div className="news_content">
                <div className="new_title">{ch_title}</div>
                <div className="news_detail_author">
                    {/* <Tag color="#108ee9" style={{fontSize:'20px'}}>{country}</Tag> */}
                    <img src={country_img(country)}/>
                    <div className="news_detail_author_adm">  
                        <div>{author}</div>
                        <div>{date} · {media} </div>
                    </div>
                </div>
                <Divider orientation="left" >正文:</Divider>
                <div dangerouslySetInnerHTML={{__html:content}}>
                
                </div>
                <Divider orientation="left" >译文:</Divider>
                <div className="news_detail_content">
                    
                    {ch_content}
                </div>
                
            </div>
            
        </div> );
}


export default Newsdetail;